<template>
    <div class="readList-container">
      <el-table
       height="350"
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="id"
                label="BookID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="bookName"
                label="书名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者">
            </el-table-column>
        </el-table>
        <div class="button-container">
            <div>
            <el-pagination
                @current-change = "nowpage"
                :hide-on-single-page ="true"
                    background
                    :page-size="10"
                    :current-page="page"
                    layout="prev, pager, next"
                    :total="count">
           </el-pagination>
         </div> 
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:null,
            count:null,
            page:1,
        }
    },
    methods:{
      async  nowpage(n){
           this.page =n;//获取用户阅读记录
            const result = await this.$axios.get("/api/user/userReadBook",{
            params:{
                bookStatus:1,
                page:n
            }
        }
        );
        this.tableData= result.rows.map((temp)=>{
        return temp.Book;
          }) 
        this.count = result.count;
     }
    },
    async created(){//渲染阅读记录
         this.nowpage(1);
    }

}
</script>
<style lang="less">
.readList-container{
    width: 100%;
    // display: flex;
    // justify-content: center;
    // flex-wrap: wrap;
    .button-container{
        width: 100%;
        padding: 30px 40px;
       
    }
}
</style>